<ui:composition xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://java.sun.com/jsf/html" xmlns:f="http://java.sun.com/jsf/core"
                xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:p="http://primefaces.org/ui">

    <div id="layout-right-panel">
        <div class="nano">
            <div class="nano-content right-panel-scroll-content">

                <span class="header">Message Box</span>
                <p:accordionPanel multiple="false" style="margin:5px 0px">
                    <p:tab title="Inbox Messages">
                        <ul>
                            <li>
                                <p:graphicImage name="images/avatar-maggie.png" library="ecuador-layout" />
                                <div class="message-container">
                                    <span class="name">Maggie Walker</span>
                                    <span class="message">Professionally cultivate one-to-one service.</span>
                                </div>
                            </li>
                            <li>
                                <p:graphicImage name="images/avatar-tom.png" library="ecuador-layout" />
                                <div class="message-container">
                                    <span class="name">Tom Baker</span>
                                    <span class="message">Dynamically innovate leveling state of art.</span>
                                </div>
                            </li>
                            <li>
                                <p:graphicImage name="images/avatar-brooke.png" library="ecuador-layout" />
                                <div class="message-container">
                                    <span class="name">Brooke Wright</span>
                                    <span class="message">Holisticly extensible testing procedures.</span>
                                </div>
                            </li>
                        </ul>
                    </p:tab>
                    <p:tab title="Sent">
                        <ul>
                            <li>
                                <p:graphicImage name="images/avatar-tom.png" library="ecuador-layout" />
                                <div class="message-container">
                                    <span class="name">Tom Baker</span>
                                    <span class="message">Envisioned multimedia based expertise.</span>
                                </div>
                            </li>
                            <li>
                                <p:graphicImage name="images/avatar-lucas.png" library="ecuador-layout" />
                                <div class="message-container">
                                    <span class="name">Lucas Fox</span>
                                    <span class="message">Visualize quality intellectual capital.</span>
                                </div>
                            </li>
                            <li>
                                <p:graphicImage name="images/avatar-brooke.png" library="ecuador-layout" />
                                <div class="message-container">
                                    <span class="name">Brooke Wright</span>
                                    <span class="message">Engage worldwide methodologies.</span>
                                </div>
                            </li>
                        </ul>
                    </p:tab>
                    <p:tab title="Drafts">
                        <ul>
                            <li>
                                <p:graphicImage name="images/avatar-lucas.png" library="ecuador-layout" />
                                <div class="message-container">
                                    <span class="name">Lucas Fox</span>
                                    <span class="message">Customer directed convergence.</span>
                                </div>
                            </li>
                            <li>
                                <p:graphicImage name="images/avatar-tom.png" library="ecuador-layout" />
                                <div class="message-container">
                                    <span class="name">Tom Baker</span>
                                    <span class="message">Installed base after maintainable products.</span>
                                </div>
                            </li>
                            <li>
                                <p:graphicImage name="images/avatar-maggie.png" library="ecuador-layout" />
                                <div class="message-container">
                                    <span class="name">Maggie Walker</span>
                                    <span class="message">Process-centric "outside the box" thinking.</span>
                                </div>
                            </li>
                        </ul>
                    </p:tab>
                </p:accordionPanel>

                <i class="fa fa-ellipsis-h"></i>

                <span class="header">Recent Activity</span>
                <p:panel>
                    <ul>
                        <li>
                            <p:graphicImage name="images/avatar-lucas.png" library="ecuador-layout" />
                            <div class="activity-container">
                                <span class="name">Lucas Fox</span>
                                <span class="activity">Does some magic with new magic wand.</span>
                                <span class="activity-date">23.12.2015 12:00</span>
                            </div>
                        </li>
                        <li>
                            <p:graphicImage name="images/avatar-maggie.png" library="ecuador-layout" />
                            <div class="activity-container">
                                <span class="name">Maggie Walker</span>
                                <span class="activity">Publish a new article named ‘How you doin?’</span>
                                <span class="activity-date">23.12.2015 12:00</span>
                            </div>
                        </li>
                        <li>
                            <p:graphicImage name="images/avatar-brooke.png" library="ecuador-layout" />
                            <div class="activity-container">
                                <span class="name">Brooke Wright</span>
                                <span class="activity">Read 4 recent news from timeline</span>
                                <span class="activity-date">23.12.2015 12:00</span>
                            </div>
                        </li>
                    </ul>
                </p:panel>
                
                <div class="nano-scroll-footer" />
            </div>
        </div>
    </div>
</ui:composition>